<template>
	<view class="top">
		<view class="top-back">
			<view class="dis-flex flex-x-between flex-y-center title">
				<view class="col-f f-36 f-w letter-spacing3">
					预警总量
				</view>
				<view class=" dis-flex flex-x-between">
					<view class="dis-flex flex-y-center">
						<view class="line">

						</view>
					</view>
					<view class="text1">
						{{date}}
					</view>
					<view class="dis-flex flex-y-center">
						<view class="line">

						</view>
					</view>
				</view>
				<view class="col-f f-36 f-w letter-spacing3">
					今日预警
				</view>
			</view>
			<view class="dis-flex flex-x-between flex-y-center">
				<view class="">
					<text class="text2 col-f f-w letter-spacing3">{{alarmNum.all}}</text><text class="text3">条</text>
				</view>
				<view class="">
					<text class="text2 col-f f-w letter-spacing3">{{warningStatisticsData.length}}</text><text class="text3">条</text>
				</view>
			</view>
		</view>
		<view class="board-box  dis-flex flex-x-between">
			<view class="board">
				<view class="dis-flex flex-x-between">
					<view class="text4 f-w oneline-hide" style="color: rgba(212, 0, 0, 1);">
						{{alarmNum.high}}
					</view>
					<view class="">
						<image style="height: 20rpx;width: 20rpx;" src="@/static/imags/home/arrows1.png" mode="">
						</image>
					</view>
				</view>
				<view class="text5">
					高风险预警
				</view>
			</view>
			<view class="board ">
				<view class="dis-flex flex-x-between">
					<view class="text4 f-w" style="color: rgba(255, 132, 0, 1);">
						{{alarmNum.in}}
					</view>
					<view class="">
						<image style="height: 20rpx;width: 20rpx;" src="@/static/imags/home/arrows3.png" mode="">
						</image>
					</view>
				</view>
				<view class="text5">
					中风险预警
				</view>
			</view>
			<view class="board">
				<view class="dis-flex flex-x-between">
					<view class="text4 f-w" style="color: rgba(0, 140, 255, 1);">
						{{alarmNum.low}}
					</view>
					<view class="">
						<image style="height: 20rpx;width: 20rpx;" src="@/static/imags/home/arrows2.png" mode="">
						</image>
					</view>
				</view>
				<view class="text5">
					低风险预警
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "OverviewTop",
		props: {
			alarmNum: {
				type: [Object],
				default: {}
			},
			warningStatisticsData: {
				type: Array,
				default: () => []
			}
		},
		data() {
			return {
				date: '',
			}
		},
		created() {
			this.setDate()
		},
		methods: {
			setDate() {
				// 获取当前日期
				let currentDate = new Date();

				// 获取月份
				let year = currentDate.getFullYear();

				// 获取月份
				let month = currentDate.getMonth() + 1;

				// 获取日
				let day = currentDate.getDate();

				this.date = `${year}年${month}月${day}日`
			}
		}
	}
</script>

<style lang="scss" scoped>
	.top {
		.top-back {
			background-color: #008CFF;
			border-radius: 0 0 45rpx 45rpx;
			padding: 10rpx 30rpx 110rpx 30rpx;
		}

		.title {
			padding: 0 30rpx;

			.line {
				width: 55rpx;
				height: 3rpx;
				background-color: rgba(255, 255, 255, 0.5);
			}

			.text1 {
				margin: 0 15rpx;
				font-size: 25rpx;
				color: rgba(255, 255, 255, 0.5);
			}
		}

		.text2 {
			font-size: 80rpx;
		}

		.text3 {
			font-size: 20rpx;
			color: rgba(255, 255, 255, 0.5);
		}

		.board-box {
			padding: 0 30rpx;
			margin-top: -80rpx;

			.board {
				padding: 15rpx 20rpx;
				width: 200rpx;
				border-radius: 20rpx;
				background-image: url('@/static/imags/home/background1.png');
				background-size: cover;
				/* 设置背景图片撑满整个盒子 */
				background-repeat: no-repeat;
				/* 设置背景图片只展示一次 */
				background-position: center;
				/* 设置背景图片居中显示 */

				.text4 {
					font-size: 50rpx;
				}

				.text5 {
					font-size: 20rpx;
					color: rgba(61, 61, 61, 0.5);
				}
			}
		}
	}
</style>